<template>

    <div class="box">
        <RouterLink to="/coursedetail">
            <div class="card">
                <img :src="image.src" :alt="image.title" v-bind:style="{ width: '100%', height: '200px' }" />
                <div class="info" style="margin-top: -10px;">
                    <h3>{{ image.title }}</h3>
                    <ul>
                        <li v-for="tag in image.tags" :key="tag">{{ tag }}</li>
                    </ul>
                </div>
            </div>
        </RouterLink>

    </div>
</template>

<script>
import { RouterView, RouterLink } from 'vue-router'

export default {

    props: {
        image: {
            type: Object,
            required: true,
        },
    },
};
</script>

<style scoped>
.box {
    display: inline-block;
    display: flex;
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    width: 250px;
    /* 卡片宽度 */
    height: 300px;
    /* 卡片高度 */

}

.card {
    display: flex;
    flex-direction: column;
    /* 确保子元素垂直排列 */
}

.card img {
    width: 100%;

    /* 使图片宽度适应卡片宽度 */

    height: 50px;

    /* 保持图片高度自适应 */
    object-fit: cover;
    /* 覆盖默认的缩放行为 */
}

.box .info {
    padding: 10px;
    margin-top: -50px;
    flex-direction: column;
}

.box h3 {
    margin: 0;
    font-size: 1.2em;
}

.box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.box li {
    display: inline-block;
    margin-right: 5px;
    background-color: #eee;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.8em;
}
</style>